<template>
  <div class="assign container">
    <el-card class="box-card">
      <div class="clearfix">
        <span style="font-size:22px;">课后作业</span>
        <el-button id="add_group" style="float: right;" type="primary" @click="open">返回</el-button>
        <el-button type="primary" @click="handleOpen" style="float:right;margin-right:10px;">从题库中选择</el-button>
      </div>
    </el-card>

    <el-form
      ref="title"
      :model="title"
      label-width="120px"
      style="backgroundColor:#fff;padding:17px;"
    >
      <el-form-item label="活动名称" :rules="[{ required: true}]">
        <el-input v-model="title.name"></el-input>
      </el-form-item>

      <el-form-item label="是否填写信息" :rules="[{ required: true}]">
        <el-radio v-model="yes" label="1">是</el-radio>
        <el-radio v-model="yes" label="2">否</el-radio>
      </el-form-item>

      <el-form-item label="答题">
        <div id="answerQuestion" v-if="!form.ID">
          <div class="left_l">
            <img
              class="tu1"
              src=""
            />
            <el-button type="primary" @click="handleOpen">从题库中选择</el-button>
          </div>
          <div class="right_r">
            <div class="demo-drawer__contentright">
              <div class="first" v-if="!form.ID">
                <!-- 首页面 -->
                <div
                  class="box"
                  style="width:320px;height:548px;backgroundColor:#fff;position:relative;border:1px solid #000"
                >
                  <phonefirst></phonefirst>
                </div>
              </div>
            </div>
          </div>
        </div>
        <!-- 布置--作业题 -->
        <div id="answerQuestion2" v-if="form.ID">
          <div class="questionTop">
            <el-tag
              v-for="(tag,index) in answerData"
              :key="index"
              closable
              :type="tored===index?'success':'info'"
              @click="handleSwitch(tag,index)"
              @close="handleClose(index)"
            >{{tag.name}}</el-tag>
          </div>
          <div class="questionBotton">
            <div class="demo-drawer__content">
              <!-- 内容 -->
              <subject v-if="form.ID" v-bind="{formData:form, setData}"></subject>
            </div>
            <div class="demo-drawer__question">
              <div
                class="box"
                style="overflow:auto;width:320px;height:548px;backgroundColor:#fff;position:relative;border:1px solid #000"
              >
                <div class="p_head">
                  <span>第{{tored+1}}题</span>
                  <span class="p_headtype">{{form.type}}</span>
                </div>
                <div class="p_section">
                  <div class="content" v-html="form.text"></div>
                </div>
                <div style="padding-left: 16px;height: 30px;border-bottom: 1px solid #eaeaea;">请填写答案</div>
                <!-- 单选 -->
                <div class="p_key" v-if="form.type=='单选'">
                  <span
                    v-for="(item,index) in form.data.单选"
                    :class="form.data.answer==item?'color':''"
                    :key="index"
                  >{{item}}</span>
                </div>
                <!-- 多选 -->
                <div class="p_key" v-if="form.type=='多选'">
                  <span
                    v-for="(item,index) in form.data.多选"
                    :class="form. data.answer.includes(item)?'color':''"
                    :key="index"
                  >{{item}}</span>
                </div>
                <!-- 填空 -->
                <div class="p_key tiankong" v-if="form.type=='填空'">
                  <div
                    v-for="(item,index) in form.data.填空"
                    :key="index"
                    style="display:flex;align-items:center;margin:5px 0;"
                  >
                    <h5 v-text="index+1"></h5>.
                    <input type="text" placeholder="请输入答案" :value="item" id="text" />
                  </div>
                </div>
                <!-- 简答 -->
                <div class="p_key tiankong" v-if="form.type=='解答'">
                  <el-input
                    type="textarea"
                    style="width:250px;"
                    :rows="2"
                    placeholder="请输入内容"
                    v-model="textarea"
                  ></el-input>
                </div>
                <div class="p_footer">
                  <span @click="phone_reduce">上一题</span>
                  <span @click="phone_add">下一题</span>
                </div>
              </div>
            </div>
          </div>
        </div>
      </el-form-item>
      <el-button type="primary" @click="handleSend" style="margin-left:40px">发送</el-button>
    </el-form>
    <!-- 从题库选择 -->
    <el-dialog title="题目选择" :visible.sync="dialogVisible" width="510px">
      <el-divider class="topline"></el-divider>
      <div class="chooseItem" id="chooseItem">
        <div class="itemLeft">
          <p class="itemTitle">题库组</p>
          <el-divider>
            <i class="el-icon-more-outline"></i>
          </el-divider>
          <div
            class="left"
            v-for="(item,index) in tableData"
            :key="index"
            :class="flag==index?'active':''"
            @click="handleColor(item,index)"
          >
            <span>{{item.name}}</span>
            <i class="el-icon-arrow-right"></i>
          </div>
        </div>
        <div class="itemRight">
          <p class="itemTitle">答题</p>
          <el-divider>
            <i class="el-icon-more-outline"></i>
          </el-divider>
          <div
            class="right"
            v-for="(item2,index2) in detailData.filter(item=>item.itembankgroupid == chooseID)"
            :key="index2"
            @click="handleChoose(item2)"
          >
            <span>{{item2.name}}</span>
          </div>
        </div>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import { api } from "../../../api/index.js";
import subject from "./subject/index.vue";
import phonefirst from "./box/phonefirst.vue";
export default {
  name: "assign",
  data() {
    return {
      textarea: "",
      // tags: [],
      title: {
        name: ""
      },
      rules: {
        name: [
          { required: true, message: "请输入活动名称", trigger: "blur" },
          { min: 3, max: 5, message: "长度在 3 到 5 个字符", trigger: "blur" }
        ]
      },
      dialogVisible: false,
      tableData: [],
      detailData: [],
      // homework: [],
      flag: 0,
      answerData: [],
      isShow: true,
      isShow2: false,
      tored: -1,
      //题目
      // 选项按钮
      //添加选项数组
      chooseID: "",
      chooseData: [],
      phoneData: {},
      form: {},
      yes: "1"
    };
  },
  watch: {
    tored(newV, oldV) {
      console.log(newV, oldV);
      if (this.answerData[oldV]) {
        console.log(this.answerData[oldV]);
        //将改变后的值（form---->this.answer)
        this.handleInto(oldV, this.form);
      }
      if (this.answerData[newV]) {
        this.handleForm(this.answerData[newV]);
      }
    }
  },
  methods: {
    setData(data) {
      this.form = data;
    },
    //退回到测试题页面
    open() {
      this.$router.back();
    },
    //选择是那个----题库组
    handleColor(item, id) {
      console.log(item.ID);
      this.chooseID = item.ID;
      this.flag = id;
      console.log(
        this.detailData.filter(item => item.itembankgroupid == this.chooseID)
      );
      this.chooseData = this.detailData.filter(
        item => item.itembankgroupid == this.chooseID
      );
    },
    //选择是--题库组----题目
    handleChoose(data) {
      console.log(this.chooseID);
      if (this.answerData.find(item => item.ID == data.ID)) {
        console.log(1);
      } else {
        console.log(21212);
        this.answerData.push(JSON.parse(JSON.stringify(data)));
      }
      if (this.answerData.length) {
        if (!this.form.ID) {
          this.handleSwitch(this.answerData[0], 0);
        }
      }
    },
    //切换题目
    handleSwitch(tag, index) {
      this.tored = index;
    },
    //存储form
    handleForm(tag) {
      if (tag) {
        if (!tag.data.单选) {
          tag.data.单选 = [];
        }
        if (!tag.data.多选) {
          tag.data.多选 = [];
        }
        if (!tag.data.填空) {
          tag.data.填空 = [];
        }
        if (!tag.data.answer) {
          if (tag.type == "多选" || tag.type == "填空") {
            tag.data.answer = [];
          } else {
            tag.data.answer = "";
          }
        }
      }
      this.form = JSON.parse(JSON.stringify(tag));
      setTimeout(() => {
        this.form = JSON.parse(JSON.stringify(tag));
      }, 30);
    },
    handleInto(index, tag) {
      index = this.answerData.findIndex(v => v.ID == tag.ID);
      if (index != -1) {
        //将新的
        this.answerData.splice(index, 1, tag);
      }
    },
    change(val) {
      console.log(val);
    },
    //发送
    handleSend() {
      this.handleInto(this.tored, this.form);
      if (this.title.name != "") {
        console.log(this.answerData);

        api("/v4/teacher/addteachertextitembank", {
          name: this.title.name,
          info: this.yes,
          data: this.answerData
        })
          .then(() => {
            api("/v4/teacher/selectteachertextitembank", {});
            this.title.name = "";
            this.form.ID = false;
            this.$router.push({ path: "/itembank" });
          })
          .catch(err => {
            console.log(err);
          });
      } else {
        this.$alert("题目名称不能为空", "", {
          confirmButtonText: "确定"
        });
      }
    },
    //关闭 --对话框
    handleOpen() {
      this.dialogVisible = true;
    },
    //删除答题题目
    handleClose(id) {
      if (this.answerData.length > 0) {
        this.answerData.splice(id, 1);
        if (this.answerData[0]) {
          this.tored = 0;
        } else {
          this.tored = -1;
          this.form.ID = 0
        }
        if (this.tored === 0) {
          this.handleForm(this.answerData[0]);
        }
      }
    },
    //点击下一个页面
    phone_add() {
      console.log(this.tored);
      if (this.tored > -1 && this.tored < this.answerData.length - 1) {
        this.tored++;
      }
    },
    //点击上一个页面
    phone_reduce() {
      if (this.tored > 0 && this.tored < this.answerData.length) {
        this.tored--;
      }
    }
  },
  async created() {
    this.tableData = await api("/v4/teacher/getitembankgroup");
    this.detailData = await api("/v4/teacher/getitembank");
  },
  components: {
    subject,
    phonefirst
  }
};
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
.color {
  background-color: #69a5f8 !important;
  color: #fff;
}
.p_head {
  height: 44px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0 16px;
  border-bottom: 1px solid #eaeaea;
}
.p_headtype {
  width: 65px;
  height: 25px;
  border: 1px solid #bfd9fb;
  background-color: #edf4fd;
  text-align: center;
  line-height: 25px;
  color: #69a5f8;
  font-size: 14px;
  border-radius: 4px;
}
.p_section {
  min-height: 320px;
  background-color: #fff;
}
.p_section .content {
  padding: 10px;
}
.p_key {
  min-height: 70px;
  border-bottom: 1px solid #eaeaea;
  display: flex;
  align-items: center;
  justify-content: center;
}
.tiankong {
  display: flex;
  flex-direction: column;
}
.p_key #text {
  width: 200px;
  height: 30px;
  border-radius: 10px;
  outline: none;
  border: 1px solid #eaeaea;
  padding-left: 3px;
  margin-left: 6px;
}
.p_key span {
  height: 25px;
  width: 25px;
  background-color: #f7f7f7;
  font-size: 13px;
  font-weight: bold;
  display: block;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 3px;
}
.p_footer {
  display: flex;
  height: 70px;
  align-items: center;
  justify-content: space-around;
  padding: 0 20px;
  margin-bottom: 30px;
}
.p_footer span {
  width: 125px;
  height: 45px;
  display: block;
  color: #fff;
  background-color: #4086f2;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 30px;
}
.el-card.is-always-shadow {
  margin: 12px 0;
}
#answerQuestion {
  min-height: 180px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
#answerQuestion .left_l {
  display: flex;
  flex-direction: column;
  margin-left: 25%;
}
.tu1 {
  height: 100px;
  width: 120px;
  margin-bottom: 20px;
}

.el-divider--horizontal {
  margin: 0 !important;
  margin-bottom: 20px !important;
}
.topline {
  margin-bottom: 20px !important;
}
#chooseItem {
  display: flex;
  align-items: center;
}
#chooseItem .itemLeft {
  width: 255px;
  border: 1px solid #dee2e6;
  padding: 2px 0px 10px 0px;
  height: 400px;
  overflow: auto;
}
.left {
  width: 100%;
  padding: 10px;
  height: 45px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  box-sizing: border-box;
  /* margin-top:20px */
}
.active {
  background-color: #f8f9fa !important;
}
.right {
  width: 100%;
  padding: 10px;
  height: 45px;
  display: flex;
  justify-content: left;
  align-items: center;
  background-color: #f8f9fa !important;
  box-sizing: border-box;
  /* margin-top:20px */
}
.right:hover {
  background-color: #ccc !important;
}
#chooseItem .itemRight {
  width: 255px;
  border: 1px solid #dee2e6;
  padding: 2px 0px 10px 0px;
  height: 400px;
  overflow: auto;
}
.itemTitle {
  text-align: center;
}
/* 题目 */
#answerQuestion2 {
  min-height: 180px;
  display: flex;
  flex-direction: column;
  background-color: #fff;
}
.el-tag {
  margin: 0 3px;
}
.questionBotton {
  background-color: #fff;
  min-height: 600px;
  display: flex;
  justify-content: space-between;
}
.el-form {
  margin-bottom: 50px;
}
/* 题目详情 */
.demo-drawer__content {
  padding: 20px 20px 0 -20px;
  width: 400px;
}
</style>
